<template>
  <div>
    <v-layout row wrap>
      <v-flex xs9>
        <v-btn color="blue">新增品牌</v-btn>
      </v-flex>
      <v-flex xs3>
        <v-text-field
            label="搜索"
        ></v-text-field>
      </v-flex>
    </v-layout>


    <v-data-table
        :headers="headers"
        :items="brands"
        :search="search"
        :pagination.sync="pagination"
        :total-items="totalDesserts"
        :loading="loading"
        class="elevation-1"
    >
      <template slot="items" slot-scope="props">
        <tr>
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center">{{ props.item.image }}</td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="text-xs-center">
            <v-btn flat icon color="green" small>
              <v-icon small>edit</v-icon>
            </v-btn>
            <v-btn flat icon color="red" small>
              <v-icon small>delete</v-icon>
            </v-btn>
          </td>
        </tr>
      </template>
    </v-data-table>
  </div>
</template>

<script>
  export default {
    name: "MyBrand",
    data() {
      return {
        search: '',
        totalDesserts: 0,
        brands: [],
        loading: true,
        pagination: {},
        headers: [ // 表格的头
          {text: '品牌id', align: 'center', value: 'id'},
          {text: '品牌名称', align: 'center', sortable: false, value: 'name'},
          {text: '品牌LOGO', align: 'center', sortable: false, value: 'image'},
          {text: '首字母', align: 'center', value: 'letter'},
          {text: '操作', align: 'center', value: 'letter'},
        ]
      }
    },
    watch:{
      pagination:{
        deep: true,
        handler(){
          console.log("我准备发请求了！！");
        }
      }
    },
    created() {
      this.brands = [
        {id: 1001, name: "小米", image: "1.jpg", letter: "X"},
        {id: 1002, name: "华为", image: "2.jpg", letter: "H"},
        {id: 1003, name: "Oppo", image: "3.jpg", letter: "O"},
        {id: 1004, name: "VIVO", image: "4.jpg", letter: "V"},
        {id: 1005, name: "Apple", image: "5.jpg", letter: "A"},
        {id: 1005, name: "Apple", image: "5.jpg", letter: "A"},
        {id: 1005, name: "Apple", image: "5.jpg", letter: "A"},
        {id: 1005, name: "Apple", image: "5.jpg", letter: "A"},
        {id: 1005, name: "Apple", image: "5.jpg", letter: "A"},
        {id: 1005, name: "Apple", image: "5.jpg", letter: "A"},
      ]
    }
  }
</script>

<style scoped>

</style>